@import '../../containers/Application/colors.scss';

$itemColor: $shakespeare;
$itemBorderColor: $shakespeare;
$itemBackgroundColor: $white;

$itemBackgroundColorSelected: $shakespeare;
$itemColorSelected: $white;

$itemColorDisabled: $silver;
$itemBorderColorDisabled: $silver;
$itemColorDisabledSelected: $white;
$itemBackgroundColorDisabledSelected: $silver;

.item {
    align-items: center;
    background-color: $itemBackgroundColor;
    border-radius: 6px;
    border: 1px solid $itemBorderColor;
    color: $itemColor;
    cursor: pointer;
    display: inline-flex;
    font-size: 16px;
    justify-content: center;
    margin-right: 5px;
    padding: 0;
    text-align: center;
    height: 26px;
    width: 26px;

    &.selected {
        background-color: $itemBackgroundColorSelected;
        color: $itemColorSelected;
    }

    &.disabled {
        cursor: default;
        color: $itemColorDisabled;
        border-color: $itemBorderColorDisabled;
    }

    &.selected.disabled {
        background-color: $itemBackgroundColorDisabledSelected;
        color: $itemColorDisabledSelected;
    }
}
